<template>
  <div class="data-card_wrap" :class="[opts.mode]" @click="$emit('click', opts)">
    <div class="title">
      <slot name="title">
        <span class="txt">{{opts.title}}</span>
        <i class="bcc-iconfont bcc-icon-ic_enter" v-if="opts.showEnter"></i>
        <a-popover v-if="opts.tips" :width="100" trigger="hover" placement="bottom">
          <div class="popover-content">{{opts.tips}}</div>
          <i class="bcc-iconfont bcc-icon-ic_help" slot="reference"></i>
        </a-popover>
      </slot>
    </div>
    <div class="body">
      <slot name="body">
        <div class="num">{{opts.num}}</div>
        <div class="footer">
          <span class="desc">{{opts.desc}}</span>
          <span class="content" :class="{up: opts.upArrow, down: opts.downArrow}">{{opts.content}}</span>
        </div>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    opts: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .data-card_wrap {
    vertical-align: middle;
    background: rgba(0,161,214,0.03);
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 12.5%;
    padding-top: 12px;
    border: 1px solid transparent;
    &.linkHover{
      &:hover{
        cursor: pointer;
      } 
    }
    &.linkActive{
      background: rgba(0,161,214,.08);
      border: 1.5px solid rgba(0,161,214,.4);
    }
    .popover-content{
      word-break: break-all;
    }
    .title{
      font-size: 12px;
      color: #757575;
      line-height: 16px;
    }
    .body{
      .num{
        margin-top: 6px;
        margin-bottom: 8px;
        line-height: 22px;
        font-weight: 600;
        font-size: 22px;
        color: #00A1D6;
        letter-spacing: 0.5px;
      }
      .footer{
        display: flex;
        align-items: center;
        .desc{
          font-size: 12px;
          color: #757575;
          line-height: 16px;
          padding-right: 4px;
        }
        .content{
          font-weight: 700;
          padding-right: 60px;
          font-size: 14px;
          color: #00A1D6;
          letter-spacing: 0;
          &.up{
            &::before{
              content: " ";
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-right: 8px;
              width: 0;
              height: 0;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-bottom: 6px solid #00a1d6;
            }
          }
          &.down{
            &::before{
              content: " ";
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-right: 8px;
              width: 0;
              height: 0;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 6px solid #00a1d6;
            }
          }
        }
      }
    }
    .bcc-icon-ic_enter, .bcc-icon-ic_help{
      font-size: 10px;
      -webkit-transform: scale(0.77);
      transform: scale(0.77);
      color: #999;
      margin-left: -1px;
    }
  }
</style>

